<script setup>
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from '@element-plus/icons-vue'
</script>

<template>

  <div>
    <el-card>
      <el-descriptions title="个人信息">
        <el-descriptions-item label="姓名">姚顺意</el-descriptions-item>
        <el-descriptions-item label="电话">18100000000</el-descriptions-item>
        <el-descriptions-item label="部门">行政管理部</el-descriptions-item>
        <el-descriptions-item label="级别">
          <el-tag size="small">一级管理岗</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="办公地址">
          行政-302
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
  <div>
      <tr>
        <td>
          <el-card >
            <div>已办列表</div>
              <el-card>
                <el-card style="width: 530px" shadow="hover">
                  2024年12月8日当天请假申请已通过。
                  <div style="text-align: right">2024年12月8日 星期日 14:31:20</div></el-card>
                <el-card style="width: 530px" shadow="hover">
                  2024年12月5日报销审批已通过。
                  <div style="text-align: right">2024年12月6日 星期五 16:21:17</div></el-card>
                <el-card style="width: 530px" shadow="hover">
                  2024年12月3日系统更新已完成。
                  <div style="text-align: right">2024年12月3日 星期二 10:23:40</div></el-card>
              </el-card>
          </el-card>
        </td>
        <td>
          <el-card>
            <div>待批列表</div>
            <el-card>
              <el-card style="width: 530px" shadow="hover">
                年假调休申请  &nbsp; &nbsp; &nbsp; &nbsp;<el-tag size="small">待审批</el-tag>
                <div>2024年12月9日 星期一 09:31:20</div></el-card>
              <el-card style="width: 530px" shadow="hover">
                系统使用培训补训申请&nbsp; &nbsp; &nbsp; &nbsp;<el-tag size="small">待审批</el-tag>
                <div>2024年12月3日 星期二 09:31:20</div></el-card>
              <el-card style="width: 530px" shadow="hover">
                关于于2024年12月15日召开数据安全培训会议&nbsp; &nbsp; &nbsp; &nbsp;<el-tag size="small">待审批</el-tag>
                <div>2024年11月28日 星期四 09:31:20</div></el-card>
            </el-card>

          </el-card>
        </td>
      </tr>
  </div>
  <hr>
  <div>
   <el-card>
     <el-row :gutter="16">
       <el-col :span="8">
         <div class="statistic-card">
           <el-statistic :value="281">
             <template #title>
               <div style="display: inline-flex; align-items: center">
                 出勤汇总
                 <el-tooltip
                     effect="dark"
                     content="Number of users who logged into the product in one day"
                     placement="top"
                 >
                   <el-icon style="margin-left: 4px" :size="12">
                     <Warning />
                   </el-icon>
                 </el-tooltip>
               </div>
             </template>
           </el-statistic>
           <div class="statistic-footer">
             <div class="footer-item">
               <span>比上年</span>
               <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
             </div>
           </div>
         </div>
       </el-col>
       <el-col :span="8">
         <div class="statistic-card">
           <el-statistic :value="37">
             <template #title>
               <div style="display: inline-flex; align-items: center">
                 维修汇总
                 <el-tooltip
                     effect="dark"
                     content="Number of users who logged into the product in one month"
                     placement="top"
                 >
                   <el-icon style="margin-left: 4px" :size="12">
                     <Warning />
                   </el-icon>
                 </el-tooltip>
               </div>
             </template>
           </el-statistic>
           <div class="statistic-footer">
             <div class="footer-item">
               <span>比上月</span>
               <span class="red">
              12%
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
             </div>
           </div>
         </div>
       </el-col>
       <el-col :span="8">
         <div class="statistic-card">
           <el-statistic :value="430" title="New transactions today">
             <template #title>
               <div style="display: inline-flex; align-items: center">
                 用餐金额汇总
               </div>
             </template>
           </el-statistic>
           <div class="statistic-footer">
             <div class="footer-item">
               <span>比上年</span>
               <span class="green">
              16%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
             </div>
             <div class="footer-item">
               <el-icon :size="14">
                 <ArrowRight />
               </el-icon>
             </div>
           </div>
         </div>
       </el-col>
     </el-row>
   </el-card>
  </div>
</template>

<style scoped lang="scss">
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>